<template>
	<view class="content">

		<!-- 消息列表盒子 === 滑动效果 === ‘待完善’  -->
		<!-- 		<view class="newslist" v-for="(item, index) in newsList" :index="index" :key="index"
		 @touchstart="touchS" @touchmove="touchM" @touchend="touchE" @click="handleClick(index)"
		 :style="{left: leftStyle + 'rpx'}"> -->
		<!-- 消息列表盒子 -->
		<view class="newslist" v-for="(item, index) in newsList" :index="index" :key="index"
			@click="handleClick(index)">
			<!-- left -->
			<view class="newslistleft">
				<image :src="item.imgUrl" mode=""></image>
			</view>
			<!-- right -->
			<view class="newslistright">
				<view class="newsrighttime">
					<text style="font-size: 14px;font-weight: 600;color: black;">{{item.user}}</text>
					<text>{{item.date}}</text>
				</view>
				<text>{{item.cont}}</text>
			</view>

			<view class="delete-icon">删除</view>


		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 模拟消息盒子
				leftStyle: 0,
				startX: 0,
				hiddenFlag: true,
				delBtnWidth: 220,
				newsList: [{
						id: '001',
						user: '俊诚',
						imgUrl: '../../static/logo/imgtest.jpg',
						cont: '哈塞Kei',
						date: "2024-2-8"
					},
					{
						id: '002',
						user: '测试',
						imgUrl: '../../static/logo/Nielogo.png',
						cont: '测试测试Kei',
						date: "2024-3-8"
					},
				],
			};
		},
		onLoad() {

		},
		methods: {
			// list index = ？？？
			handleClick(index) {
				// 通过index判断不同的事件
				console.log('Clicked item with index:', index);
			},

			/*
			消息列表盒子 === 滑动效果 === ‘待完善’
			// 开始移动时
			touchS({ touches }) {
				// startX记录开始移动的位置
				if(touches.length === 1) {
					this.startX = touches[0].clientX;
				}
				// hiddenFlag为true则是从右向左，为false则是从左向右
				if(this.leftStyle === 0) {
					this.hiddenFlag = true;
				} else {
					this.hiddenFlag = false;
				}
			},
			touchM({ touches }) {
				if(touches.length === 1) {
					//手指移动时水平方向位置
					const moveX = touches[0].clientX;
					this.moveFunc(moveX);
				}
			},
			touchE({ touches }) {
				const { leftStyle } = this;
				const { delBtnWidth } = this;
				// 如果停止滑动的距离大于二分之一则直接弹出删除按钮，不然则left为0
				if(-leftStyle > delBtnWidth/2) {
					this.leftStyle = -delBtnWidth;
				} else {
					this.leftStyle = 0;
				}
			},
			moveFunc(moveX) {
				// 原始位置向左，leftStyle为小于0；原始位置向右，leftStyle为大于0
				// disX为相对最初位置的左右距离
				// 大于0为向右，小于0为向左
				const disX = moveX - this.startX;
				const delBtnWidth = this.delBtnWidth;
				let offsetNum = 0;
				if(-disX >= delBtnWidth && this.leftStyle === -delBtnWidth) {
					return;
				}
				// console.log(disX, this.hiddenFlag);
				// this.hiddenFlag为true则是从左到右，则应该将container向左移动
				// this.hiddenFlag为false则是从右向左，则应该将container向右移动
				if(this.hiddenFlag) {
					// 此时container为最右边，则应该将container向左移动
					// disX大于0为相对原始位置的向右移动，则直接将offsetNum置为0
					// 否则为向左移动，offsetNum为disX相反的值，判断是否超过设置的最大位置
					if(disX == 0 || disX > 0) {
						offsetNum = 0;
					} else {
						offsetNum = disX;
						if (disX <= -delBtnWidth) {
							//控制手指移动距离最大值为删除按钮的宽度
							offsetNum = -delBtnWidth;
						}
					}
				} else {
					// 此时container为最左边，应该向右移动
					// disX小于0为相对原始位置的向左移动，则直接将offsetNum置为-this.delBtnWidth
					// 否则为相对原始位置的向右移动，此时应该将最大位置与向右位置的差值为此刻位置，判断是否为大于0
					if(disX < 0) {
						offsetNum = -this.delBtnWidth;
					} else {
						offsetNum = -this.delBtnWidth + disX;
						if(offsetNum > 0) {
							offsetNum = 0;
						}
					}
				}
				this.leftStyle = offsetNum;
			}
			*/


		},
	}
</script>

<style lang="scss">
	.content {
		margin-top: 10px;
		overflow-x: hidden;

		.newslist {
			position: relative;
			width: 100%;
			height: 140rpx;
			display: flex;

			.delete-icon {
				position: absolute;
				top: 50%;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
				right: -197rpx;
				width: 130rpx;
				height: 62rpx;
				line-height: 62rpx;
				border-radius: 31rpx;
				font-weight: 500;
				font-size: 32rpx;
				text-align: center;
				color: #FFFFFF;
				background: #FF1C1C;
			}

			.newslistleft {
				margin: 8px;
				width: 100rpx;
				height: 100rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.newslistright {
				border-top: 1px solid #e7e7e7;
				;

				flex: 6;
				padding-right: 20px;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.newsrighttime {
					display: flex;
					justify-content: space-between;
				}

				text {
					margin-top: 4px;
					font-size: 10px;
					color: #979797;
				}
			}
		}
	}
</style>